<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>武汉理工大学出版社</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
	</head>
	<body style="background-color: #fff;">
		<!-- 头部 -->
		<div id="header"></div>
		
		<div id="bootstrap"></div>
		
		<div class="sales_zone" id="app">
			<div class="sales_zone_cont">
				<!-- 基本信息 -->
				<div class="user_form">
					<p class="title">样书申请信息</p>
					<ul style="margin-bottom: 0.52rem;">
						<li>
							<p class="key">书名<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="stylebookName" placeholder="请输入书名">
							</div>
						</li>
						<li>
							<p class="key">作者<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="stylebookAuthor" placeholder="请输入作者">
							</div>
						</li>
						<li>
							<p class="key">ISBN<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="stylebookIsbn" placeholder="请输入ISBN">
							</div>
						</li>
					</ul>
					
					<p class="title">申请人信息</p>
					<ul>
						<li>
							<p class="key">学校<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="applicantSchool" placeholder="请输入学校">
							</div>
						</li>
						<li>
							<p class="key">课程<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="applicantCourse" placeholder="请输入课程">
							</div>
						</li>
						<li>
							<p class="key">邮箱<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="applicantEmail" placeholder="请输入申请人邮箱">
							</div>
						</li>
						<li>
							<p class="key">姓名<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="applicantName" placeholder="请输入申请人姓名">
							</div>
						</li>
						<li>
							<p class="key">电话<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="applicantPhone" placeholder="请输入申请人电话">
							</div>
						</li>
						<li>
							<p class="key">地址<span style="color: #ae0c17;font-size: 0.23rem">*</span></p>
							<div class="val">
								<input type="text" v-model="applicantAddress" placeholder="请输入地址">
							</div>
						</li>
<!--						<li style="width: 100%;">-->
<!--							<p class="key">备注</p>-->
<!--							<div class="val" style="width: 11.4rem;height: 2rem;display: block;padding: 0.1rem;">-->
<!--								<textarea placeholder="请输入地址" v-model="remark" name="" id="" cols="30" rows="10"></textarea>-->
<!--							</div>-->
<!--						</li>-->
					</ul>
					<div style="display: flex; width: 100%;">
						<p class="key" style="width: 0.74rem;text-align: right;margin-right: 0.24rem;font-size: 0.16rem">备注</p>
						<div class="val" style="width: 11.65rem;height: 2rem;display: block;padding: 0.1rem;border: 0.01rem solid #d2d2d2;border-radius: 0.1rem;">
							<textarea style="width: 100%;border: none;outline: none;" placeholder="请输入您的其他需求" v-model="remark" name="" id="" cols="30" rows="10"></textarea>
						</div>
					</div>
				</div>
				<div class="but" @click="sampleApplication">确认提交</div>
			</div>
		</div>
		
		
		<!-- 底部 -->
		<div id="footer"></div>

	</body>
	<script>
		const App = {
			data() {
				return {
					applicantAddress: "",
					applicantCourse: "",
					applicantName: "",
					applicantPhone: "",
					applicantSchool: "",
					remark: "",
					stylebookAuthor: "",
					stylebookIsbn: "",
					stylebookName: "",
					applicantEmail:""
				}
			},
			mounted(){
				sessionStorage.setItem('href',window.location.href);
			},
			methods:{
				// 样书申请
				async sampleApplication(){
					let that = this;
					if(!that.stylebookName){
						alert('请输入书名')
						return
					}
					if(!that.stylebookAuthor){
						alert('请输入作者')
						return
					}
					if(!that.stylebookIsbn){
						alert('请输入isbn')
						return
					}
					if(!that.applicantSchool){
						alert('请输入学校')
						return
					}
					if(!this.applicantCourse){
						alert('请输入课程')
						return
					}
					if(!this.applicantEmail){
						alert('请输入邮箱')
						return
					}
					var emailRegExp=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
					var resu = emailRegExp.test(that.applicantEmail);
					if(!resu) {
						alert("邮箱格式不正确！");
						that.isLoadingShow = false
						return;//若邮箱格式不正确则返回false
					}
					if(!this.applicantName){
						alert('请输入姓名')
						return
					}
					if(!this.applicantPhone){
						alert('请输入手机号')
						return
					}
					var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
					var result = re.test(that.applicantPhone);
					if(!result) {
						alert("手机号码格式不正确！");
						that.isLoadingShow = false
						return;//若手机号码格式不正确则返回false
					}
					if(!this.applicantAddress){
						alert('请输入地址')
						return
					}

					let param = {
						applicantAddress: that.applicantAddress,
						applicantCourse: that.applicantCourse,
						applicantName: that.applicantName,
						applicantPhone: that.applicantPhone,
						applicantSchool: that.applicantSchool,
						remark: that.remark,
						stylebookAuthor: that.stylebookAuthor,
						stylebookIsbn: that.stylebookIsbn,
						stylebookName: that.stylebookName,
						applicantEmail:that.applicantEmail,
						type:2
					}
					await axios({
						method:"POST",
						url:"http://dbs.wutp.com.cn/CM-API/sampleApplicationApi/sampleApplication",
						data:param,
						header: { "Content-Type": "application/json" }
					}).then(function (res) {
						alert("申请成功");
						that.applicantAddress = '';
						that.applicantCourse = '';
						that.applicantName = '';
						that.applicantPhone = '';
						that.applicantSchool = '';
						that.remark = '';
						that.stylebookAuthor = '';
						that.stylebookIsbn = '';
						that.stylebookName = '';
					})
				}
			}
		};
		Vue.createApp(App).mount('#app');
	</script>

	<style>
		input{
			border: none;
		}
		.sales_zone{
			display: flex;
			margin: 0 3rem;
		}
		.user_form .title{
			font-size: 0.3rem;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #222222;
			margin-bottom: 0.32rem;
			padding: 0 0.3rem;
		}
		.user_form ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.user_form ul li{
			width: 33%;
			display: flex;
			align-items: center;
			margin-bottom: 0.2rem;
		}
		.user_form ul li .key{
			width: 1rem;
			text-align: right;
			font-size: 0.16rem;
			margin-right: 0.24rem;
			line-height: 0.16rem;
		}
		.user_form ul li .val{
			width: 4rem;
			height: 0.5rem;
			border: 0.01rem solid #d2d2d2;
			border-radius: 0.06rem;
			display: flex;
			align-items: center;
			padding: 0 0.14rem;
		}
		.user_form ul li .val input{
			width: 100%;
		}
		.user_form .ul{
			display: flex;
			align-items: center;
			margin: 0 0.12rem;
			cursor: pointer;
		}
		.user_form .ul img{
			width: 0.18rem;
			height: 0.18rem;
			margin-right: 0.06rem
		}
		.user_form .ul p{
			font-size: 0.18rem;
			color: #333;
			line-height: 0.18rem;
		}
		.user_form .item{
			margin-right: 0.2rem;
		}
		.user_form ul li .val textarea{
			border: none;
			width: 100%;
			height: 100%;
			outline: none;
		}
		.sales_zone_cont{
			flex: 1;
			margin-top: 0.2rem;
		}
		.but{
			width: 2.2rem;
			height: 0.56rem;
			background-color: #212f52;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 0.16rem;
			border-radius: 0;
			margin:0.6rem auto 0.8rem;
			cursor: pointer;
		}
	</style>
</html>
